<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <div class="container">
            <div class="control">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box">内容1</div>
                  <div class="box">内容2</div>
                  <div class="box">内容3</div>
            </div>
      </div>

      <!-- <div class="container">
            <div class="control1">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box1">内容1</div>
                  <div class="box1">内容2</div>
                  <div class="box1">内容3</div>
            </div>
      </div> -->
      <script>
      
      function Table( btn_selector , content_selector){
         // 这是按钮选择;
         this.btns = document.querySelectorAll( btn_selector );
         this.contents = document.querySelectorAll( content_selector );
         // 当前显示的内容下标;
         this.index = 0;

         this.bindEvent();
      }
      // 事件绑定功能;
      Table.prototype.bindEvent = function(){
            // 1. 找到元素绑定事件; 
            // this => 实例对象;
            var self = this;
            // console.log(self.btns);
            for(var i = 0 ; i < self.btns.length ; i ++){
                  // 在dom对象上记录当前的数据;
                  self.btns[i].index = i;
                  self.btns[i].onclick = function(){
                       // this => DOM 
                       // this.index 
                       // console.log(this.index);
                       self.index = this.index;
                       self.changeTable();
                  }
            }
      }
      // 切换内容功能;
      Table.prototype.changeTable = function(){
            var self = this;
            // this => self √ dom?
            // 1. 隐藏所有;
            for(var i = 0 ; i < self.contents.length ; i ++){
                  self.contents[i].style.display = "none";
            }
            self.contents[self.index].style.display = "block";
      }
      var tab1 = new Table(".control button" , ".box");

      // 1. 高内聚 
      // 2. 低耦合 
      
      </script>      
</body>
</html>